@import (reference) 'config';

.transactions-container w-scroll-box,
.transactions w-scroll-box {
  border-radius: @border-radius;
  margin: -10px -10px 0;
  padding: 10px;

  .scroll-list {
    height: 100%;
  }
}

w-transaction-list {
  display: flex;
  height: 100%;

  w-transaction {
    width: 100%;
  }

  .w-visible {
    min-height: 74px;
  }

  .transaction-list-mixin {
    background-color: @color-white;
    border-radius: @border-radius;
  }

  .no-transactions {
    .transaction-list-mixin();
    position: relative;
    min-height: 230px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .w-transaction-list {
    width: 100%;
    border-radius: @border-radius;
    transform: translate3d(0, 0, 0);

    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      transform: translate3d(0, 0, 0);
      height: 100%;

      li {
        padding: 0;

        .date {
          line-height: 42px;
          padding-left: 23px;
          height: 42px;
          text-transform: uppercase;
          background-color: @app-background;
          font-family: @font-roboto-medium;
          letter-spacing: 2px;
        }

        .row {
          .w-visible {
            border-bottom: 1px solid @color-basic-50;
          }

          &:hover {
            background: @hover-default;
          }
        }
      }
    }
  }
}

.fake-transaction-line {
  display: block;
  position: relative;
  margin: 30px 0;
  height: 13px;

  w-loader {
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .transaction-item .date {
    padding-left: 23px;
  }

  body.transactions {
    .main-content {
      .w-visible {
        height: 91px;
      }

      w-transaction-list {
        min-height: calc(100vh ~'- 148px');
        .w-transaction-list {

          ul {
            overflow: auto;
          }

          &.no-transactions {
            min-height: 250px;
          }
        }
      }
    }
  }
}
